<template>
  <el-drawer
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    size="50%"
    :wrapper-closable="false"
    @close="cancel">
    <div class="drawer-container">
      <hk-form
        ref="formRef"
        class="hk-flex"
        :data="formData"
        :rules="rules"
        :label-width="labelWidth"
        :btn-hidden="btnHidden"
        :dict-list="dictList"
        :form-labels="formLabels">
        <template #filter-digitalCertificatePath>
          <file-upload
            ref="file"
            v-model="fileList"
            :drag="true"
            :multiple="false"
            :is-show-tip="false"
            :file-type="fileType"
            :accept="accept"
            :upload-file-url="uploadFileUrl">
            <template #text>
              <div>点击或将文件拖拽到这里上传,最多可上传一个文件</div>
              <div class="sub-text">支持扩展名.pdf .jpg .png</div>
            </template>
          </file-upload>
        </template>
        <!-- <template #filter-expiryDate>
          <span>{{ deadline }}</span>
        </template> -->
      </hk-form>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import HkForm from '@/components/Hk-Form'

export default {
  components: { HkForm },
  props: {
    dictList: {
      type: Object,
      default: () => {
        return {
          secLevelList: [],
          unitTypeList: [],
          provinceList: [],
          operatingStatusList: [],
        }
      },
    },
  },
  data() {
    return {
      accept: '.pdf,.jpg,.png',
      deadline: '2022-10-12',
      title: '新增',
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '120',
      // 是否显示按钮
      btnHidden: true,
      formData: {},
      eventData: {},
      uploadFileUrl: window.baseUrl.action + '/attachment/upload',
      fileType: ['pdf', 'jpg', 'png'],
      fileList: [],
      eventLevelList: [],
      eventTypeList: [],
      eventCategoryList: [],
      formLabels: [
        {
          label: '资质名称',
          field: 'credentialName',
          type: 'input',
          span: 24,
          maxlength: 50,
        },
        {
          label: '证书编号',
          field: 'certificateNo',
          type: 'input',
          span: 24,
          maxlength: 20,
        },
        {
          label: '资质类型',
          field: 'credentialType',
          type: 'select',
          list: 'credentialTypelList',
          multiple: false,
          span: 24,
        },
        {
          label: '资质等级',
          field: 'credentialLevel',
          type: 'select',
          list: 'credentialLevelList',
          span: 24,
        },
        {
          label: '发证机关',
          field: 'issuingAuthority',
          type: 'input',
          maxlength: 50,
          span: 24,
        },
        {
          label: '发证日期',
          field: 'publishDate',
          type: 'datePicker',

          format: 'yyyy-MM-dd HH:mm:ss',
          span: 24,
        },
        // {
        //   label: '有效期(年)',
        //   field: 'expirationTime',
        //   type: 'input',
        //   // type: 'InputNumber',
        //   // precision:0,
        //   // max:10,
        //   // min:1,
        //   span: 24,
        //   maxlength: 10,
        // },
        {
          label: '资质到期时间',
          field: 'expiryDate',
          type: 'datePicker',

          format: 'yyyy-MM-dd HH:mm:ss',
          span: 24,
        },
        {
          label: '资质电子证书',
          field: 'digitalCertificatePath',
          type: 'slot',
          maxlength: 100,
          span: 24,
        },
      ],
      index: undefined,
      // 表单校验
      rules: {
        credentialName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        credentialType: [{ required: true, message: '不能为空', trigger: 'blur' }],
        certificateNo: [
          { required: true, message: '不能为空', trigger: 'blur' },
          // { pattern: /^(0|[1-9][0-9]*)$/, message: '只能是数字', trigger: 'blur' },
        ],
        credentialLevel: [{ required: true, message: '不能为空', trigger: 'change' }],
        // expiryDate: [
        //   { required: true, message: '不能为空', trigger: 'change' },
        //   { pattern: /^(0|[1-9][0-9]*)$/, message: '只能是数字', trigger: 'blur' },
        // ],
        publishDate: [{ required: true, message: '不能为空', trigger: 'change' }],
        expiryDate: [{ required: true, message: '不能为空', trigger: 'change' }],
        digitalCertificatePath: [{ required: true, message: '不能为空', trigger: 'change' }],
        issuingAuthority: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
    }
  },

  mounted() {
    var d = new Date('2021-12-17')
    var cc = d.setFullYear(d.getFullYear() + 1)
    console.log(cc,'s');
    var aa = this.formatDate(new Date(cc))
    console.log(aa, 'dd')
  },
  methods: {
    formatDate(date) {
      //定义日期格式化函数
      var year = date.getFullYear() //获取年份
      var month = date.getMonth() + 1 //获取月份
      var day = date.getDate() //获取日期
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day 
      return year + '' + month + '' + day 
    },
    submitForm() {
      if (this.fileList.length) {
        this.formData.digitalCertificateName = this.fileList[0].name
        this.formData.digitalCertificatePath = this.fileList[0].url
      }
      this.$refs.formRef.handleFormSubmit('formLabels').then((res) => {
        res = { ...this.formData, ...res }
        // update(res).then(() => {
        this.$message.success('保存成功')
        this.$emit('handleSubmit', res, this.index)
        this.cancel()
        // })
      })
    },

    show(data, index) {
      this.formData = {}
      this.index = index
      if (data) {
        this.formData = JSON.parse(JSON.stringify(data))
        this.$set(this.formData, 'credentialType', data.credentialType[0])
        this.$nextTick(() => {
          this.$refs.file.fileList = [data['digitalCertificatePath']].map((i) => {
            return {
              name: i,
              url: i,
            }
          })
        })
      }
      this.open = true
      this.$nextTick(() => {
        this.$refs.formRef.clearcheck('formLabels')
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.formData = {}
      this.$refs.formRef.resetForm('formLabels')
      this.fileList = []
    },
  },
}
</script>

  <style lang="scss" scoped>
.dark-theme {
  span {
    color: #fff !important;
  }
}
.sub-title {
  height: 20px;
  border-left: 2px solid #4b6eef;
  margin-bottom: 22px;

  span {
    margin-left: 8px;
  }
}

.ml10 {
  margin-left: 10px;
}

.mt40 {
  margin-top: 40px;
}
.drawer-container {
  padding: 0;
}
::v-deep {
  .el-upload--text {
    width: 100%;
  }
  .el-upload-dragger {
    width: 100%;
  }
  .el-upload--text {
    width: 100%;
  }
}
</style>

